<template lang="html">
  <Card :style="{borderRadius: '0px'}">
    <p slot="title">天气信息 <span class="refresh-time" v-show="weather.reportTime">更新时间: {{weather.reportTime}}</span></p>
    <div>
      <!-- today -->
      <div v-show="weather.casts.length > 0">
        <div>
          <p><Icon type="ios-location" style="margin-right: 5px;"></Icon> {{city.province}}-{{city.name}}</p>
          <div class="weather-temp" v-cloak v-if="new Date().getHours() > 6 && new Date().getHours() < 18">{{weather.casts[0].daytemp}}℃
            <span>
              <Icon type="ios-sunny-outline" v-if="weather.casts[0].dayweather.includes('晴')"></Icon>
              <Icon type="ios-partlysunny-outline" v-if="weather.casts[0].dayweather.includes('云')"></Icon>
              <Icon type="ios-cloudy-outline" v-if="weather.casts[0].dayweather.includes('阴')"></Icon>
              <Icon type="ios-rainy-outline" v-if="weather.casts[0].dayweather.includes('雨')"></Icon>
              <Icon type="ios-thunderstorm-outline" v-if="weather.casts[0].dayweather.includes('雷')"></Icon>
              <Icon type="ios-snowy" v-if="weather.casts[0].dayweather.includes('雪')"></Icon>
              {{weather.casts[0].dayweather}}
            </span>
          </div>
          <div class="weather-temp" v-cloak v-else>{{weather.casts[0].nighttemp}}℃
            <span>
              <Icon type="ios-sunny-outline" v-if="weather.casts[0].nightweather.includes('晴')"></Icon>
              <Icon type="ios-partlysunny-outline" v-if="weather.casts[0].nightweather.includes('云')"></Icon>
              <Icon type="ios-cloudy-outline" v-if="weather.casts[0].nightweather.includes('阴')"></Icon>
              <Icon type="ios-rainy-outline" v-if="weather.casts[0].nightweather.includes('雨')"></Icon>
              <Icon type="ios-thunderstorm-outline" v-if="weather.casts[0].nightweather.includes('雷')"></Icon>
              <Icon type="ios-snowy" v-if="weather.casts[0].nightweather.includes('雪')"></Icon>
              {{weather.casts[0].nightweather}}
            </span>
          </div>
        </div>
      </div>

      <!-- 3天 预报 -->
      <div v-show="weather.casts.length > 0" :style="{paddingTop: '20px', borderTop: '1px dashed #ddd'}">
        <ul :style="{display: 'flex'}">
          <li class="weather-forecast" v-for="(cast, index) in weather.casts" v-show="index > 0">
            <p class="forecast-date" v-if="index === 1">明天</p>
            <p class="forecast-date" v-else-if="index === 2">后天</p>
            <p class="forecast-date" v-else-if="index === 3">大后天</p>
            <p class="forecast-weather">
              <Icon class="weather-icon" type="ios-sunny-outline" v-if="cast.dayweather.includes('晴')"></Icon>
              <Icon class="weather-icon" type="ios-partlysunny-outline" v-if="cast.dayweather.includes('云')"></Icon>
              <Icon class="weather-icon" type="ios-cloudy-outline" v-if="cast.dayweather.includes('阴')"></Icon>
              <Icon class="weather-icon" type="ios-rainy-outline" v-if="cast.dayweather.includes('雨')"></Icon>
              <Icon class="weather-icon" type="ios-thunderstorm-outline" v-if="cast.dayweather.includes('雷')"></Icon>
              <Icon class="weather-icon" type="ios-snowy" v-if="cast.dayweather.includes('雪')"></Icon>
              {{cast.dayweather}}
            </p>
            <p class="forecast-temp">{{cast.daytemp}}℃</p>
          </li>
        </ul>
      </div>
    </div>
  </Card>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  data () {
    return {
      city: {
        name: '',
        code: '',
        province: '',
        rectangle: ''
      },
      weather: {
        reportTime: null,
        casts: [],
      }
    }
  },
  methods: {
    ...mapActions(['queryCityInfo', 'queryCityWeatherByCityCode']),
    async handleCityInfoAndWeather () {
      try {
        const {data} = await this.queryCityInfo()
        this.city.name = data.city
        this.city.code = data.adcode
        this.city.province = data.province
        this.rectangle = data.rectangle

        console.log('rectangle')
        const { data: weather } = await this.queryCityWeatherByCityCode(this.city.code)
        this.weather.reportTime = weather.forecasts[0].reporttime
        this.weather.casts = weather.forecasts[0].casts
      } catch (err) {
        console.error(err)
      }
    }
  },
  beforeMount() {
    this.handleCityInfoAndWeather()
  }

}
</script>

<style lang="css" scoped>
  .refresh-time {
    color: #999;
    font-size: 12px;
    font-weight: normal;
    margin-left: 5px;
  }

  .weather-temp {
    height: 80px;
    line-height: 80px;
    font-size: 40px;
    text-align: center;
  }
  .weather-temp span {
    font-size: 20px;
    margin-left: 20px;
  }
  .weather-temp span i {
    font-size: 35px;
    vertical-align: sub;
  }
  .weather-forecast {
    display: inline-block;
    flex: 1;
    text-align: center;
  }
  .forecast-date {
    margin-bottom: 10px;
  }
  .forecast-weather {
    margin: 10px 0;
  }
  .weather-icon {
    font-size: 26px;
    vertical-align: sub;
  }
  .forecast-temp {

  }

</style>
